console.log('content script loaded=============================')
const domContent = document.querySelector('pre').innerHTML
console.log(domContent,'domContentdomContentdomContent')
const entityTree = JSON.parse(domContent)
console.log(entityTree,'domContent')
const tree = pretifyJson(entityTree, true);
console.log(tree,'DOM结构')
// 创建一个style元素
var style = document.createElement('style');
 
// 设置type属性
style.type = 'text/css';
 
// 添加CSS内容
style.innerHTML = `body{
        padding-top: 20px;
    }
    #data_info{
        width: 100%;
        font-size: 16px;
        white-space: pre-wrap;
        word-wrap: break-word;
    }
    .string { color: green; }
    .number { color: darkorange; }
    .boolean { color: blue; }
    .null { color: magenta; }
    .key { color: red; }`;
 
// 将style元素插入到head中
document.head.appendChild(style);
document.querySelector('body').innerHTML = ''
document.querySelector('body').innerHTML = `<pre id="data_info"></pre>`;
document.querySelector('#data_info').innerHTML = tree;


function pretifyJson(json, pretify=true) {
    if (typeof json !== 'string') {
        if(pretify){
            json = JSON.stringify(json, undefined, 4);
        }else{
            json = JSON.stringify(json);
        }
    }
    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
        function (match) {
            let cls = "<span>";
            if (/^"/.test(match)) {
                if (/:$/.test(match)) {
                    cls = "<span class='key'>";
                } else {
                    cls = "<span class='string'>";
                }
            } else if (/true|false/.test(match)) {
                cls = "<span class='boolean'>";
            } else if (/null/.test(match)) {
                cls = "<span class='null'>";
            }
            return cls + match + "</span>";
        }
    );
}

